import { ref as v, onMounted as re, defineComponent as J, useAttrs as K, computed as se, openBlock as y, createElementBlock as P, mergeProps as Q, unref as e, createElementVNode as a, normalizeStyle as m, normalizeClass as ve, createCommentVNode as G, renderSlot as fe, createBlock as A, createVNode as U, Transition as me, withCtx as he, withDirectives as pe, toDisplayString as X, createTextVNode as ge, vShow as ye, pushScopeId as Ce, popScopeId as be } from "vue";
let C = {
  src: "https://prod-streaming-video-msn-com.akamaized.net/a8c412fa-f696-4ff2-9c76-e8ed9cdffe0f/604a87fc-e7bc-463e-8d56-cde7e661d690.mp4",
  //视频
  poster: "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AAOEcdM.img",
  // 初始化占位图片
  volume: 20,
  themeColor: "#19accc",
  //主体颜色
  activeColor: "red",
  //选中颜色
  width: "500px",
  height: "300px"
};
const Se = (u) => {
  let d = v({
    src: u.src != "" ? u.src : C.src,
    //视频
    poster: u.poster != "" ? u.poster : C.poster,
    // 初始化占位图片
    volume: u.volume ?? C.volume,
    themeColor: u.themeColor != "" ? u.themeColor : C.themeColor,
    //主体颜色
    activeColor: u.activeColor != "" ? u.activeColor : C.activeColor,
    //选中颜色
    width: u.width != "" ? u.width : C.width,
    height: u.height != "" ? u.height : C.height
  }), n = v({
    play: !1,
    //播放状态
    hideControl: !0,
    // 控制栏状态
    distance: 0,
    // 移动的距离
    downState: !1,
    // 鼠标点击进度条
    playState: !1,
    leftInit: 0,
    // 当前进度初始偏移量
    isFullScreen: !1,
    //是否全屏
    isHalfScreen: !1,
    //是否半屏
    isLoading: !0
    //是否加载
  }), r = v({
    // 同上
    distance: 0,
    downState: !1,
    topInit: 0
  }), c = v(null), l = v(null), h = v(null), V = v(null), M = v(null), R = v(null), F = v(""), b = v(""), g = v(0), S = v(null), z = v(null), I = v(null), f = v(0), E = v(null);
  const _ = (t) => {
    E.value && clearTimeout(E.value);
    let s = document.querySelector(`.${t}`);
    s.className = `control-fade-enter-active show display-show-style ${t}`;
  }, w = (t) => {
    let s = document.querySelector(`.${t}`);
    s.className = `control-fade-leave-active hide ${t}`, E.value = setTimeout(() => {
      s.className = `control-fade-leave-active hide display-hide-style ${t}`;
    }, 1e3);
  }, T = (t) => {
    F.value = B(l.value.duration);
  }, k = () => {
    const t = 100 * l.value.currentTime / l.value.duration;
    M.value.style.width = t + "%", R.value.style.left = t - 1 + "%", b.value = B(l.value.currentTime);
  }, D = (t) => {
    M.value.style.width = 0, R.value.style.left = 0, b.value = "0", n.value.play = !1, n.value.hideControl = !1;
  }, q = () => {
    const t = (l.value.volume - 0.05) * 100;
    z.value.style.height = t.toFixed(0) + "%", I.value.style.bottom = t.toFixed(0) + "%";
  }, H = () => {
    let t = l.value.duration;
    if (t > 0) {
      for (let s = 0; s < l.value.buffered.length; s++)
        if (l.value.buffered.start(l.value.buffered.length - 1 - s) < l.value.currentTime) {
          let ce = l.value.buffered.end(l.value.buffered.length - 1 - s) / t * 100 + "%";
          V.value.style.width = ce;
          break;
        }
    }
  }, $ = () => {
    l.value.addEventListener("loadstart", function(t) {
    }), l.value.addEventListener("durationchange", T), l.value.addEventListener("loadedmetadata", function(t) {
      n.value.isLoading = !1;
    }), l.value.addEventListener("loadeddata", function(t) {
    }), l.value.addEventListener("progress", function(t) {
      H();
    }), l.value.addEventListener("canplay", function(t) {
      n.value.isLoading = !1;
    }), l.value.addEventListener("canplaythrough", function(t) {
    }), l.value.addEventListener("play", function(t) {
    }), l.value.addEventListener("pause", function(t) {
    }), l.value.addEventListener("seeking", k), l.value.addEventListener("seeked", function(t) {
      n.value.isLoading = !0;
    }), l.value.addEventListener("waiting", function(t) {
      n.value.isLoading = !0;
    }), l.value.addEventListener("playing", function(t) {
      n.value.isLoading = !1;
    }), l.value.addEventListener("timeupdate", k), l.value.addEventListener("ended", D), l.value.addEventListener("error", function(t) {
    }), l.value.addEventListener("volumechange", q), l.value.addEventListener("stalled", function(t) {
    }), l.value.addEventListener("ratechange", function(t) {
    }), l.value.addEventListener("click", () => {
      l.value.paused || l.value.ended ? (l.value.ended && (l.value.currentTime = "0"), x("btn")) : p("btn");
    });
  }, x = (t) => {
    t && (n.value.playState = !0), n.value.play = !0, l.value.play();
  }, p = (t) => {
    t && (n.value.playState = !1), l.value.pause(), n.value.play = !1;
  }, j = (t) => {
    ne(), n.value.downState = !0, p(), n.value.distance = t.clientX - n.value.leftInit;
  }, O = (t) => {
    if (!n.value.downState)
      return;
    let s = t.clientX - n.value.leftInit;
    s > g.value && (s = g.value), s < 0 && (s = 0), n.value.distance = s, l.value.currentTime = n.value.distance / g.value * l.value.duration;
  }, W = () => {
    n.value.downState = !1, l.value.currentTime = n.value.distance / g.value * l.value.duration, b.value = B(l.value.currentTime), n.value.playState && x();
  }, te = (t) => {
    r.value.topInit = N(S.value).top, f.value = S.value.clientHeight, r.value.downState = !0, r.value.distance = f.value - (t.clientY - r.value.topInit);
  }, o = (t) => {
    if (!r.value.downState)
      return;
    let s = r.value.topInit + f.value - t.clientY;
    s > f.value && (s = f.value), s < 0 && (s = 0), r.value.distance = s, l.value.volume = r.value.distance / f.value > 1 ? 1 : r.value.distance / f.value, d.value.volume = Math.round(l.value.volume * 100);
  }, i = (t) => {
    t.stopPropagation(), r.value.downState = !1, l.value.volume = r.value.distance / f.value > 1 ? 1 : r.value.distance / f.value, d.value.volume = Math.round(l.value.volume * 100);
  }, ae = (t) => {
    t.stopPropagation(), l.value.volume * 100 > 0 && l.value.volume * 100 <= 100 ? l.value.volume = 0 : l.value.volume = 1, d.value.volume = Math.round(l.value.volume * 100), r.value.distance = Math.round(l.value.volume * 100);
  }, ie = (t, s) => {
    switch (s) {
      case "start":
        n.value.hideControl = !1;
        break;
      case "end":
        n.value.hideControl = !0;
        break;
    }
  }, ue = () => {
    n.value.isFullScreen = !n.value.isFullScreen, n.value.isFullScreen ? le() : oe();
  }, de = () => {
    let t = (document.body.offsetHeight / 2).toFixed(0), s = (document.body.offsetWidth / 2).toFixed(0);
    n.value.isHalfScreen = !n.value.isHalfScreen, n.value.isHalfScreen ? (c.value.style.width = s + "px", c.value.style.height = t + "px") : (c.value.style.width = d.value.width, c.value.style.height = d.value.height);
  }, B = (t) => {
    let s = Math.floor(t / 60);
    return s < 10 && (s = "0" + s), s + ":" + (t % 60 / 100).toFixed(2).slice(-2);
  }, N = (t, s) => (s || (s = {}, s.left = 0, s.top = 0), t === document.body || t === null ? s : (s.top += t.offsetTop, s.left += t.offsetLeft, N(t.offsetParent, s))), le = () => {
    let t = document.documentElement;
    t.requestFullscreen ? t.requestFullscreen() : t.mozRequestFullScreen ? t.mozRequestFullScreen() : t.webkitRequestFullScreen && t.webkitRequestFullScreen(), c.value.style.width = "100%", c.value.style.height = "100%";
  }, oe = () => {
    let t = document;
    t.exitFullscreen ? t.exitFullscreen() : t.mozCancelFullScreen ? t.mozCancelFullScreen() : t.webkitCancelFullScreen && t.webkitCancelFullScreen(), c.value.style.width = d.value.width, c.value.style.height = d.value.height;
  }, ne = () => {
    var t;
    g.value <= 0 && (g.value = h.value.clientWidth), n.value.leftInit <= 0 && (n.value.leftInit = N(h.value).left), l.value.volume = ((t = d.value) == null ? void 0 : t.volume) / 100;
  };
  return re(() => {
    ne(), $();
  }), {
    videoConfig: d,
    videoState: n,
    voiceState: r,
    videoRef: c,
    videoDomRef: l,
    videoProOutRef: h,
    videoCacheRef: V,
    videoProRef: M,
    videoPoiRef: R,
    duration: F,
    currentTime: b,
    processWidth: g,
    voiceProOutRef: S,
    voiceProRef: z,
    voicePoiRef: I,
    voiceProcessHeight: f,
    handleHalfScreen: de,
    handleMouseEnterControlVoice: _,
    handleMouseLeaveControlVoice: w,
    handleProgressDown: j,
    handleInitVideo: $,
    play: x,
    pause: p,
    handleProgressMove: O,
    handleProgressUp: W,
    handleVolProgressDown: te,
    handleVolProgressMove: o,
    handleClickVoice: ae,
    handleVolProgressUp: i,
    handleControls: ie,
    handleScreen: ue,
    timeTranslate: B,
    getOffset: N,
    fullScreen: le,
    exitFullscreen: oe
  };
}, _e = /* @__PURE__ */ J({
  __name: "svgIcon",
  props: {
    iconClass: { default: "" },
    iconStyle: {},
    className: { default: "" },
    size: { default: "12" }
  },
  setup(u) {
    const d = u;
    let n = K();
    const r = se(() => `customer-video-iconfont icon-${d.iconClass}`), c = se(
      () => {
        const { size: l } = d;
        let h = `${l}`;
        return h = `${h.replace("px", "")}px`, {
          width: h,
          height: h,
          fill: "currentColor",
          ...d.iconStyle
        };
      }
    );
    return (l, h) => (y(), P("div", Q({ style: c.value }, e(n), {
      class: "svg-style u-f u-f-ac u-f-ajc",
      "aria-hidden": "true"
    }), [
      a("span", {
        style: m("font-size:" + e(d).size + "px"),
        class: ve(r.value)
      }, null, 6)
    ], 16));
  }
});
const Z = (u, d) => {
  const n = u.__vccOpts || u;
  for (const [r, c] of d)
    n[r] = c;
  return n;
}, L = /* @__PURE__ */ Z(_e, [["__scopeId", "data-v-b6897bae"]]), we = { style: { position: "relative" } }, ke = {
  key: 0,
  class: "loading-style u-f u-f-ac u-f-ajc"
}, xe = { class: "loading-icon" }, Le = /* @__PURE__ */ J({
  __name: "loading",
  props: {
    isLoading: { type: Boolean, default: !0 },
    classData: { default: "" },
    themeColor: { default: "" }
  },
  setup(u) {
    const d = u;
    let n = d.themeColor ?? "blue", r = K();
    return (c, l) => (y(), P("div", we, [
      e(d).isLoading ? (y(), P("div", ke, [
        a("div", xe, [
          a("span", {
            style: m("background:" + e(n))
          }, null, 4),
          a("span", {
            style: m("background:" + e(n))
          }, null, 4),
          a("span", {
            style: m("background:" + e(n))
          }, null, 4),
          a("span", {
            style: m("background:" + e(n))
          }, null, 4),
          a("span", {
            style: m("background:" + e(n))
          }, null, 4)
        ])
      ])) : G("", !0),
      a("div", Q({
        class: e(d).classData != "" ? e(d).classData : "app-container"
      }, e(r)), [
        fe(c.$slots, "default", {}, void 0, !0)
      ], 16)
    ]));
  }
});
const Pe = /* @__PURE__ */ Z(Le, [["__scopeId", "data-v-0841ec04"]]), ee = (u) => (Ce("data-v-fdd444b6"), u = u(), be(), u), Me = ["poster"], Re = ["src"], Ee = /* @__PURE__ */ ee(() => /* @__PURE__ */ a("p", null, "设备不支持", -1)), $e = { class: "custom-video-control" }, Ve = { class: "u-f u-f-ajs custom-video-control-all" }, Fe = { style: { display: "flex", width: "100%" } }, ze = { class: "custom-video-control-control u-f u-f-ac u-f-ajc" }, Ie = { class: "custom-video-control-voice-bg-number" }, Te = { class: "custom-video-control-time u-f u-f-ac u-f-ajc margin-right-5" }, De = { style: { "user-select": "none" } }, qe = { style: { "user-select": "none" } }, He = { class: "custom-video-control-full u-f" }, je = { class: "margin-right-10 u-f u-f-ac u-f-ajc" }, Oe = /* @__PURE__ */ ee(() => /* @__PURE__ */ a("div", { class: "halfScreen-style display-hide-style" }, " 宽屏模式 ", -1)), Be = { class: "u-f u-f-ac u-f-ajc" }, Ne = /* @__PURE__ */ ee(() => /* @__PURE__ */ a("div", { class: "fullScreen-style display-hide-style" }, " 全屏模式 ", -1)), Ae = /* @__PURE__ */ J({
  __name: "customVideo",
  props: {
    src: { default: "" },
    poster: { default: "" },
    volume: { default: 20 },
    themeColor: { default: "" },
    activeColor: { default: "" },
    width: { default: "" },
    height: { default: "" }
  },
  setup(u) {
    const d = u, n = K();
    let r = v(!0), {
      videoConfig: c,
      videoState: l,
      videoRef: h,
      videoDomRef: V,
      videoProOutRef: M,
      videoCacheRef: R,
      videoProRef: F,
      videoPoiRef: b,
      duration: g,
      currentTime: S,
      voiceProOutRef: z,
      voiceProRef: I,
      voicePoiRef: f,
      handleHalfScreen: E,
      handleMouseEnterControlVoice: _,
      handleMouseLeaveControlVoice: w,
      handleProgressDown: T,
      play: k,
      pause: D,
      handleProgressMove: q,
      handleProgressUp: H,
      handleVolProgressDown: $,
      handleVolProgressMove: x,
      handleClickVoice: p,
      handleVolProgressUp: j,
      handleControls: O,
      handleScreen: W
    } = Se(d);
    return (te, o) => (y(), P("div", Q({ class: "custom-video" }, e(n)), [
      a("div", {
        class: "custom-video-container",
        ref_key: "videoRef",
        ref: h,
        onMouseover: o[22] || (o[22] = (i) => e(O)(i, "start")),
        onMouseleave: o[23] || (o[23] = (i) => e(O)(i, "end"))
      }, [
        e(l).play ? (y(), P("div", {
          key: 0,
          class: "u-f u-f-ac u-f-ajc",
          onClick: o[0] || (o[0] = (i) => e(D)("btn")),
          style: { position: "absolute", height: "100%", width: "100%", "z-index": "99" }
        }, [
          e(l).isLoading ? (y(), A(e(Pe), {
            key: 0,
            style: { height: "50px", width: "100%" },
            themeColor: e(c).themeColor,
            isLoading: e(r)
          }, null, 8, ["themeColor", "isLoading"])) : G("", !0)
        ])) : (y(), P("div", {
          key: 1,
          class: "u-f u-f-ac u-f-ajc",
          onClick: o[2] || (o[2] = (i) => e(k)("btn")),
          style: { position: "absolute", height: "100%", width: "100%", "z-index": "99" }
        }, [
          e(l).play ? G("", !0) : (y(), A(e(L), {
            key: 0,
            style: m("color:" + e(c).themeColor + ";height:70px;width: 70px;"),
            size: 70,
            onClick: o[1] || (o[1] = (i) => e(k)("btn")),
            iconClass: "bofang"
          }, null, 8, ["style"]))
        ])),
        a("video", {
          class: "custom-video-video",
          ref_key: "videoDomRef",
          ref: V,
          poster: e(c).poster
        }, [
          a("source", {
            src: e(c).src,
            type: "video/mp4"
          }, null, 8, Re),
          Ee
        ], 8, Me),
        U(me, { name: "slide-fade" }, {
          default: he(() => [
            pe(a("div", $e, [
              a("div", {
                class: "custom-video-control-bg",
                onMousedown: o[3] || (o[3] = //@ts-ignore
                (...i) => e(T) && e(T)(...i)),
                onMousemove: o[4] || (o[4] = //@ts-ignore
                (...i) => e(q) && e(q)(...i)),
                onMouseup: o[5] || (o[5] = //@ts-ignore
                (...i) => e(H) && e(H)(...i))
              }, [
                a("div", {
                  class: "custom-video-control-bg-outside",
                  ref_key: "videoProOutRef",
                  ref: M
                }, [
                  a("span", {
                    class: "custom-video-control-bg-inside-cache",
                    ref_key: "videoCacheRef",
                    ref: R
                  }, null, 512),
                  a("span", {
                    class: "custom-video-control-bg-inside",
                    ref_key: "videoProRef",
                    ref: F
                  }, null, 512),
                  a("span", {
                    class: "custom-video-control-bg-inside-point",
                    ref_key: "videoPoiRef",
                    ref: b
                  }, null, 512)
                ], 512)
              ], 32),
              a("div", Ve, [
                a("div", Fe, [
                  a("div", ze, [
                    e(l).play ? (y(), A(e(L), {
                      key: 0,
                      size: 24,
                      class: "custom-video-control-control-play custom-video-control-control-pause",
                      onClick: o[6] || (o[6] = (i) => e(D)("btn")),
                      style: m("color:" + e(c).themeColor),
                      iconClass: "zanting"
                    }, null, 8, ["style"])) : (y(), A(e(L), {
                      key: 1,
                      size: 24,
                      class: "custom-video-control-control-play",
                      onClick: o[7] || (o[7] = (i) => e(k)("btn")),
                      style: m("color:" + e(c).themeColor),
                      iconClass: "bofang"
                    }, null, 8, ["style"]))
                  ]),
                  a("div", {
                    class: "custom-video-control-voice u-f u-f-ac u-f-ajc margin-right-5",
                    onMousemove: o[15] || (o[15] = //@ts-ignore
                    (...i) => e(x) && e(x)(...i))
                  }, [
                    U(e(L), {
                      size: 20,
                      onClick: e(p),
                      onMouseleave: o[8] || (o[8] = (i) => e(w)("custom-video-control-voice-bg")),
                      onMousemove: o[9] || (o[9] = (i) => e(_)("custom-video-control-voice-bg")),
                      style: m("color:" + e(c).themeColor),
                      class: "custom-video-control-voice-play",
                      iconClass: "laba"
                    }, null, 8, ["onClick", "style"]),
                    a("div", {
                      class: "custom-video-control-voice-bg display-hide-style",
                      ref: "custom-video-control-voice-bg",
                      onMouseleave: o[12] || (o[12] = (i) => e(w)("custom-video-control-voice-bg")),
                      onMousemove: o[13] || (o[13] = (i) => e(_)("custom-video-control-voice-bg"))
                    }, [
                      a("div", Ie, X(e(c).volume), 1),
                      a("div", {
                        class: "custom-video-control-voice-bg-outside",
                        ref_key: "voiceProOutRef",
                        ref: z,
                        onMousedown: o[10] || (o[10] = //@ts-ignore
                        (...i) => e($) && e($)(...i)),
                        onMouseup: o[11] || (o[11] = //@ts-ignore
                        (...i) => e(j) && e(j)(...i))
                      }, [
                        a("span", {
                          class: "custom-video-control-voice-bg-inside",
                          ref_key: "voiceProRef",
                          ref: I
                        }, null, 512),
                        a("span", {
                          class: "custom-video-control-voice-bg-point",
                          ref_key: "voicePoiRef",
                          ref: f
                        }, null, 512)
                      ], 544)
                    ], 544),
                    a("div", {
                      onClick: o[14] || (o[14] = //@ts-ignore
                      (...i) => e(p) && e(p)(...i)),
                      style: { position: "absolute", height: "35px", width: "18px", bottom: "0px", left: "0px" }
                    })
                  ], 32),
                  a("div", Te, [
                    a("span", De, X(e(S) ? e(S) : "00:00"), 1),
                    ge(" / "),
                    a("span", qe, X(e(g) ? e(g) : "00:00"), 1)
                  ])
                ]),
                a("div", He, [
                  a("div", je, [
                    U(e(L), {
                      size: 18,
                      onMouseleave: o[16] || (o[16] = (i) => e(w)("halfScreen-style")),
                      onMousemove: o[17] || (o[17] = (i) => e(_)("halfScreen-style")),
                      style: m("color:" + e(c).themeColor),
                      class: "custom-video-control-full-icon",
                      onClick: e(E),
                      iconClass: e(l).isHalfScreen ? "suoxiaotuichuquanpingshouhui" : "quanping1"
                    }, null, 8, ["style", "onClick", "iconClass"]),
                    Oe,
                    a("div", {
                      onClick: o[18] || (o[18] = //@ts-ignore
                      (...i) => e(p) && e(p)(...i)),
                      style: { "z-index": "-1", position: "absolute", height: "35px", width: "18px", bottom: "0px", left: "0px" }
                    })
                  ]),
                  a("div", Be, [
                    U(e(L), {
                      size: 18,
                      onMouseleave: o[19] || (o[19] = (i) => e(w)("fullScreen-style")),
                      onMousemove: o[20] || (o[20] = (i) => e(_)("fullScreen-style")),
                      style: m("color:" + e(c).themeColor),
                      class: "custom-video-control-full-icon",
                      onClick: e(W),
                      iconClass: e(l).isFullScreen ? "tuichuquanping" : "quanping2"
                    }, null, 8, ["style", "onClick", "iconClass"]),
                    Ne,
                    a("div", {
                      onClick: o[21] || (o[21] = //@ts-ignore
                      (...i) => e(p) && e(p)(...i)),
                      style: { "z-index": "-1", position: "absolute", height: "35px", width: "100%", bottom: "0px", left: "0px" }
                    })
                  ])
                ])
              ])
            ], 512), [
              [ye, !e(l).hideControl || e(l).play]
            ])
          ]),
          _: 1
        })
      ], 544)
    ], 16));
  }
});
const Ue = /* @__PURE__ */ Z(Ae, [["__scopeId", "data-v-fdd444b6"]]);
let We = [Ue];
const Xe = (u) => {
  We.map((d) => {
    u.component(d.__name, d);
  });
};
let Y = window;
if (typeof Y < "u" && Y.Vue) {
  const u = Y.Vue.createApp({});
  Xe(u);
}
export {
  Xe as default
};
